<template>
  <div class="goods">
      <li v-for="(item,index) in itemgoodslist" :key="index" class="goods-item" @click="GoodsItemClick(index)">
        <img :src="item.show.img" alt="" @load="imgLoad">
        
        <div class="goods-info">
          <p>{{item.title}}</p>
          <span class="price">{{item.price}}</span>
          <span class="collect">{{item.cfav}}</span>
        </div>
      </li>
  </div>
</template>
<script>
export default {
  name:'GoodsItem',
  data() {
    return {
      currentItem:0,
    }
  },
  

  props:{
    itemgoodslist:{
      type:Array ,
      default:function(){
        return {};
      }
    }
  },
  methods: {
    imgLoad(){
      this.$bus.$emit("itemImgLoad");
    },
    GoodsItemClick(index){
      this.currentItem=index;
      // this.$router.push("/detail")
      this.$router.push({
        path:'/detail',
        query:{
          iid:this.itemgoodslist[this.currentItem].iid
        },
      });
    }
  },
}
</script>
<style scoped>
.goods{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

}

 .goods-item{
   margin:0 3px;
   padding-bottom: 40px;
   position: relative;
   list-style: none;
   width:48%;
 }
 .goods-item img{
   width: 100%;
   border-radius: 5px;
 }
  .goods-info{
    font-size:12px;
    position: absolute;
    bottom:5px;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
  }
  .goods-info p{
    /* 文本溢出，用省略号哦 */
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom:3px;
    overflow: hidden;


  }
  .goods-info .price{
    color:var(--color-high-text);
    margin-right:20px;

  }
  .goods-info .collect{
    position: relative;
  }
  .goods-info .collect::before{
    content: '';
    position: absolute;
    left:-15px;
    top:-1px;
    width: 14px;
    height: 14px;
    background: url('../../../assets/img/common/collect.svg') 0 0/14px 14px ;

  }
</style>